<template>
  <div class="hello">
      <table class="table">
        <thead :style="!!hideHeader ? 'display:none' : '' "> 
          <tr v-for="(items,i) in newArr" :key="i">
              <th v-for="(item,j) in items" :key="j" :rowspan="item.rowspan" :colspan="item.colspan">{{item.title}}</th>
          </tr>
        </thead>
        <tbody v-if="dataList">
            <tr v-for="(items,index) in dataList" :key="index">
                <td v-for="(item,i) in items.tdList" :key="i" :rowspan="resetRowSpan(index,item)">{{items[item]}}</td>
            </tr>
        </tbody>
        <tbody v-else>
          <tr v-for="(items,index) in dataList" :key="index">
              <td v-for="(item,j) in colKeyList" :key="j">{{items[item]}}</td>
          </tr>
        </tbody>
    </table>

  </div>

</template>

<script>

export default {
  name: "list",
  props: ["listTable", 'hideHeader', 'item'],
  data() {
    return {
        columns : [],    //表头原始参数
        newArr:[[]],        //表头
        maxHeight:1,         //表头总共占的行数
        colKeyList:[],        //所有的key
        dataList: [],      //tbody具体数据
        needRowSpan:[],        //tbody需要跨行的key
        span:{}                 //所跨的行数
    }
  },
  mounted(){

    if( this.item ){
      var objList = this.listTable.dataList.concat([]);  
      var arr = [];

      for( var i in objList){
          if( objList[i].zcfl == this.item.zcfl && objList[i].tzlb == this.item.tzlb && objList[i].tzje == this.item.tzje && objList[i].zclb == this.item.zclb 
            // && objList[i].cplx == this.item.cplx 
              ){
              arr.push(objList[i])
          }
      }
      this.dataList = arr;
    }
    else{
      this.dataList = this.listTable.dataList;
    }

      this.columns = this.listTable.columns;
      // this.dataList = this.listTable.dataList;
      this.maxHeight=this.getMaxFloor(this.columns);       //1. 计算出表头一共需要多少行
      this.columnsHandle(this.columns);                       //2. 对表头进行处理
      this.dataHandle(this.dataList,this.needRowSpan);         // 3. 对数据进行处理（传入参数： 具体数据，需要跨行列的（key））
    },
    methods: {
      resetRowSpan(row, key) {
        //console.log( this.span )
        //if (this.span[key] && this.span[key][row]){
        if( window.location.href.indexOf('/zcpz/assetReport/assetReport.html') != -1){

          if( this.span[key] && this.span[key][row] ){
                if( this.dataList[row] && this.dataList[row+1] && ( this.dataList[row]['zcfl'] == this.dataList[row+1]['zcfl'] ) ){
                    //不能直接返回 this.span[key][row]
                    //计算this.dataList里
                    let zcfl = this.dataList[row]['zcfl']
                    let list = this.dataList.filter(item => item['zcfl'] == zcfl )

                    if( this.span[key][row] > list.length ){
                        this.span[key][row + list.length] = this.span[key][row] - list.length;
                        return list.length;
                    }
                    else{
                        return this.span[key][row];
                    }

                }
                else{
                    //修改当前一行的span[key]
                    //console.log(key, this.span  );
                    if( this.span[key][row] > 1 ){
                        this.span[key][row+1] = this.span[key][row] - 1;
                    }

                    //console.log(key , this.span  );
                    return 1;
                }

          }
          //console.log(row, key, this.span[key]);
          // if (this.span[key] && this.span[key][row] && this.dataList[row] && this.dataList[row+1] && ( this.dataList[row]['zcfl'] == this.dataList[row+1]['zcfl'] ) ) {
          //   //console.log(row, key, this.span[key][row], this.dataList[row]['cplx'], this.dataList[row+1]['cplx']);
          //   return this.span[key][row];
          // }
          // else{
          //   //修改当前一行的span[key]
          //   if( this.span[key] && this.span[key][row] ){
          //     this.span[key][row+1] = this.span[key][row] - 1;
          //   }

          //   return 1;
          // }
        }
        else{
          if (this.span[key] && this.span[key][row]){
            return this.span[key][row];
          }
          else{
            return 1;
          }
        }

      },
      gerMaxCol(items) {
        let max = 0;
        function each(data) {
          if (max < data.length) {
            max = data.length;
          }
          data.forEach((item) => {
            if (item.children) {
              each(item.children);
            }
          });
        }
        each(items);
        return max;
      },
      getMaxFloor(treeData) {
        const that = this;
        let max = 0;
        function each(data, floor) {
          data.forEach((e) => {
            if (floor > max) {
              max = floor;
            }
            if (e.children && e.children.length > 0) {
              each(e.children, floor + 1);
          }
          });
        }
        each(treeData, 1);
        return max;
      },
      columnsHandle(treeData) {
        const that = this;
        const maxFloor = this.maxHeight;
        const keyList = [];
        function each(data, index) {
          if (that.newArr[index] === undefined) {
            that.newArr[index] = [];
          }
          data.forEach((e) => {
            const obj = {
              title: e.title,
              key: e.key,
              rowspan: maxFloor,
              colspan: 1,
            };
            if (e.children) {
              obj.colspan = that.gerMaxCol(e.children);
              obj.rowspan = maxFloor - that.getMaxFloor(e.children);
            } else {
              that.colKeyList.push(e.key);
              if (e.hasrowspan) {             //  如果存在hasrowspan属性并且值为true，则表明该key列存在跨行
                that.needRowSpan.push(e.key);
              }
            }
            that.newArr[index].push(obj);
            if (e.children && e.children.length > 0) {
              each(e.children, index + 1);
            }
          });
        }
        each(treeData, 0);
      },
      dataHandle(dataList, needRowSpan) {
        needRowSpan.forEach((key) => {
          const sum = {};
          let i = 0; let k = 0;
          const that = this;
          for (let j = 0; j < dataList.length; j += 1) {
            i += 1;
            let tdList = [];
            // if( j == 5){
            //     debugger;
            // }
            if (dataList[j].tdList) {
              tdList = [...dataList[j].tdList];
            } else {
              tdList = [...that.colKeyList];
            }
            if (dataList[j - 1] && (dataList[j][key] === dataList[j - 1][key] || !dataList[j][key])) {
              if( window.location.href.indexOf('/zcpz/assetReport/assetReport.html') != -1){
                //console.log( '第'+ j + '条：' + dataList[j]['zcfl'], dataList[j-1]['zcfl'])

                if (  dataList[j]['zcfl'] == dataList[j-1]['zcfl'])  {
                  const index = tdList.indexOf(key);
                  if (index > -1) {
                    tdList.splice(index, 1);
                  }
                }
              }else{
                const index = tdList.indexOf(key);
                if (index > -1) {
                  tdList.splice(index, 1);
                }
              }
            }
            dataList[j].tdList = tdList;

            if (dataList[j + 1] && dataList[j + 1][key]) {

              //if( window.location.href.indexOf('/zcpz/assetReport/assetReport.html') != -1){

                //if( dataList[j][key] !== dataList[j + 1][key] ){
                  // if( dataList[j]['zcfl'] == dataList[j+1]['zcfl'] ){
                  //   for( let m = 0; m< i; m++){
                  //     sum[k+m] = m;
                  //   }
                  //   i = 0; k = j + 1;
                  // }
                  // else{
                    //sum[k] = i;
                    //i = 0; k = j + 1;
                  //}
                //}


                // if ( ( dataList[j][key] !== dataList[j + 1][key] ) && (dataList[j]['zcfl'] == dataList[j+1]['zcfl']) ) {
                //   for( let m = 0; m< i; m++){
                //     sum[k+m] = m;
                //   }
                //   i = 0; k = j + 1;
                // }
                // else{
                //   if (dataList[j][key] !== dataList[j + 1][key]) {
                //     sum[k] = i;
                //     i = 0; k = j + 1;
                //   }
                // }
              //}else{
                if (dataList[j][key] !== dataList[j + 1][key]) {
                  //console.log( dataList[j][key],dataList[j + 1][key])
                  sum[k] = i;
                  i = 0; k = j + 1;
                }
              //}
              //console.log( i, k, dataList[j]['zcfl'], dataList[j+1]['zcfl'] );

            } else if (!dataList[j + 1]) {
              sum[k] = i;
            }
          }
          this.span[key] = sum;
        });
        console.log(this.span);
        console.log(dataList);
        this.showTable = true;
      },
    }

};
</script>
<style lang='less' scoped>
   .table {
            width:100%;
            border-collapse:collapse;
            font-size:12px;
            color: #515a6e;
            border:1px solid  #dddddd;
        }
        .table thead tr th{
            height: 40px;
            white-space: nowrap;
            overflow: hidden;
            background-color: #f5ede8;
        }
         td, th
        {
             text-align:center;
            border:1px solid  #dddddd;
        }
         /*tr:hover{*/
           /*background:#EBF7FF;*/
         /*}*/
        .table thead tr th ,.table tbody tr td{
            padding:0 10px;

            
        }
        .table tbody tr td{
            height:48px;
        }
</style>
